<template>
  <div class="home">
    <button class="m-l-5" type="primary" @click="exportExcel" :disabled="exportCurrentLoading">导出</button>
    <vxe-grid 
    ref="xTable" 
    :show-header="false"
    :loading="loading"
    v-bind="gridOptions" 
    :merge-cells="gridOptions && gridOptions.mergeCells">
    </vxe-grid>
  </div>
</template>

<script>
export default {
  data() {
    return {
      exportCurrentLoading: false,
      loading: false,
      gridOptions: {
        exportConfig: {
          fileName: '',
          sheetName: 'Sheet1',
          types: ['xlsx'],
          mode: 'current',
          modes: ['current'],
          isMerge: true,
          useStyle: true,
          isHeader: false,
          data: [],
        },
        data: [
          { a: '财政支出项目绩效目标申报表（填报参考）' },
          { a: '填报单位（盖章）' },
          { a: '项目名称' },
          { a: '主管部门编码 ', b: '必填', c: '主管部门', d: '必填' },
          { a: '项目单位', b: '系统取值', c: '项目负责人', d: '系统取值', e: '联系电话', f: '系统取值' },
          { a: '项目开始时间', b: '系统取值', c: '', d: '项目结束时间', e: '系统取值', f: ''  },

          { a: '项目资金申请（万元）', b: '资金总额：', c: '', d: '金额应为一、二、三项的合计数' },
          { a: '项目资金申请（万元）', b: '   一、财政拨款： ', c: '', d: '按资金来来源填写相应金额，没有的填零（显示零值）' },
          { a: '项目资金申请（万元）', b: '   二、自有资金： ', c: '', d: '金额应为1、2、3项的合计数。' },
          { a: '项目资金申请（万元）', b: '      1、事业收入', c: '', d: '按资金来来源填写相应金额，没有的填零（显示零值）' },
          { a: '项目资金申请（万元）', b: '      2、经营性收入', c: '', d: '按资金来来源填写相应金额，没有的填零（显示零值）' },
          { a: '项目资金申请（万元）', b: '      3、其他', c: '', d: '按资金来来源填写相应金额，没有的填零（显示零值）' },
          { a: '项目资金申请（万元）', b: '   三、其他： ', c: '', d: '按资金来来源填写相应金额，没有的填零（显示零值）' },

          { a: '项目单位职能概述' , b: '系统取值'},
          { a: '项目概况' , b: '系统取值'},

          { a: '项目立项情况 ' , b: '项目立项的依据', c: '系统取值'},
          { a: '项目立项情况 ' , b: '项目申报的可行性', c: '系统取值'},
          { a: '项目立项情况 ' , b: '项目申报的必要性', c: '系统取值'},

          // 动态渲染 - 项目实施进度计划
          { id: 'jdjhHeader', a: '项目实施进度计划' , b: '项目实施内容', e: '开始时间', f: '完成时间'},
          { id: 'jdjh', a: '项目实施进度计划' , b: '系统取值', e: '系统取值', f: '系统取值'},
          { id: 'jdjh', a: '项目实施进度计划' , b: '系统取值', e: '系统取值', f: '系统取值'},
          { id: 'jdjh', a: '项目实施进度计划' , b: '系统取值', e: '系统取值', f: '系统取值'},

          { a: '项目绩效目标' , b: '长期目标', c: '', d: '年度目标', e: '', f: ''},
          { a: '项目绩效目标' , b: '系统取值', c: '', d: '系统取值', e: '', f: ''},

          // 动态渲染
          { a: '长期绩效指标' , b: '一级指标', c: '二级指标', d: '指标内容', e: '指标值', f: '备注'},

          { a: '长期绩效指标' , b: '产出指标', c: '系统取值', d: '系统取值', e: '系统取值', f: '系统取值'},
          { a: '长期绩效指标' , b: '产出指标', c: '系统取值', d: '系统取值', e: '系统取值', f: '系统取值'},
          { a: '长期绩效指标' , b: '产出指标', c: '系统取值', d: '系统取值', e: '系统取值', f: '系统取值'},
          { a: '长期绩效指标' , b: '效益指标 ', c: '系统取值', d: '系统取值', e: '系统取值', f: '系统取值'},
          { a: '长期绩效指标' , b: '效益指标 ', c: '系统取值', d: '系统取值', e: '系统取值', f: '系统取值'},
          { a: '长期绩效指标' , b: '效益指标 ', c: '系统取值', d: '系统取值', e: '系统取值', f: '系统取值'},


          // 动态渲染
          { a: '年度绩效指标' , b: '一级指标', c: '二级指标', d: '指标内容', e: '指标值', f: '备注'},

          { a: '年度绩效指标' , b: '产出指标 ', c: '系统取值', d: '系统取值', e: '系统取值', f: '系统取值'},
          { a: '年度绩效指标' , b: '产出指标 ', c: '系统取值', d: '系统取值', e: '系统取值', f: '系统取值'},
          { a: '年度绩效指标' , b: '产出指标 ', c: '系统取值', d: '系统取值', e: '系统取值', f: '系统取值'},
          { a: '年度绩效指标' , b: '效益指标 ', c: '系统取值', d: '系统取值', e: '系统取值', f: '系统取值'},
          { a: '年度绩效指标' , b: '效益指标 ', c: '系统取值', d: '系统取值', e: '系统取值', f: '系统取值'},
          { a: '年度绩效指标' , b: '效益指标 ', c: '系统取值', d: '系统取值', e: '系统取值', f: '系统取值'},
          { a: '年度绩效指标' , b: '电子版可单独设立设置满意度指标', c: '', d: '', e: '系统取值', f: '系统取值'},

          { a: '其他需说明的问题', b: '系统取值' },
          { a: '预算部门审核意见', f: '（盖章）年 月 日' },
          { a: '填报人' },
          { a: '备注：以上应填内容包括但不限于所列示的提示性参考信息，请根据项目支出具体情况进一步丰富、细化、量化各项内容。' }
        ],
        columns: [
          { title: '', field: 'a' },
          { title: '', field: 'b' },
          { title: '', field: 'c' },
          { title: '', field: 'd' },
          { title: '', field: 'e' },
          { title: '', field: 'f' },
        ],
        mergeCells: [
          { row: 0, col: 0, rowspan: 0, colspan: 6 },
          { row: 1, col: 1, rowspan: 0, colspan: 5 },
          { row: 2, col: 1, rowspan: 0, colspan: 5 },
          { row: 3, col: 3, rowspan: 0, colspan: 3 },
          // 项目开始时间
          { row: 5, col: 1, rowspan: 0, colspan: 2 },
          { row: 5, col: 4, rowspan: 0, colspan: 2 },
          // 项目资金申请
          { row: 6, col: 0, rowspan: 7, colspan: 0 },
          { row: 6, col: 1, rowspan: 0, colspan: 2 },
          { row: 6, col: 3, rowspan: 0, colspan: 3 },
          { row: 7, col: 1, rowspan: 0, colspan: 2 },
          { row: 7, col: 3, rowspan: 0, colspan: 3 },
          { row: 8, col: 1, rowspan: 0, colspan: 2 },
          { row: 8, col: 3, rowspan: 0, colspan: 3 },
          { row: 9, col: 1, rowspan: 0, colspan: 2 },
          { row: 9, col: 3, rowspan: 0, colspan: 3 },
          { row: 10, col: 1, rowspan: 0, colspan: 2 },
          { row: 10, col: 3, rowspan: 0, colspan: 3 },
          { row: 11, col: 1, rowspan: 0, colspan: 2 },
          { row: 11, col: 3, rowspan: 0, colspan: 3 },
          { row: 12, col: 1, rowspan: 0, colspan: 2 },
          { row: 12, col: 3, rowspan: 0, colspan: 3 },
          // 项目单位职能概述
          { row: 13, col: 1, rowspan: 0, colspan: 5 },
          // 项目概况
          { row: 14, col: 1, rowspan: 0, colspan: 5 },
          // 项目立项情况
          { row: 15, col: 0, rowspan: 3, colspan: 0 },
          { row: 15, col: 2, rowspan: 0, colspan: 4 },
          { row: 16, col: 2, rowspan: 0, colspan: 4 },
          { id: 'jdjhHeader', row: 17, col: 2, rowspan: 0, colspan: 4 },

          // 项目实施进度计划 - 动态 - 18行开始
          {  row: 18, col: 0, rowspan: 4, colspan: 0 },
          { id: 'jdjh', row: 18, col: 1, rowspan: 0, colspan: 3 },
          { id: 'jdjh', row: 19, col: 1, rowspan: 0, colspan: 3 },
          { id: 'jdjh', row: 20, col: 1, rowspan: 0, colspan: 3 },
          { id: 'jdjh', row: 21, col: 1, rowspan: 0, colspan: 3 },
          
          // 项目绩效目标
          { row: 22, col: 0, rowspan: 2, colspan: 0 },
          { row: 22, col: 1, rowspan: 0, colspan: 2 },
          { row: 22, col: 3, rowspan: 0, colspan: 3 },
          { row: 23, col: 3, rowspan: 0, colspan: 3 },
          { row: 23, col: 1, rowspan: 0, colspan: 2 },

          // 长期绩效指标 - 动态
          { row: 24, col: 0, rowspan: 7, colspan: 0 },
          { row: 25, col: 1, rowspan: 3, colspan: 0 },
          { row: 28, col: 1, rowspan: 3, colspan: 0 },
          // 年度绩效指标 - 动态
          { row: 31, col: 0, rowspan: 8, colspan: 0 },
          { row: 32, col: 1, rowspan: 3, colspan: 0 },
          { row: 35, col: 1, rowspan: 3, colspan: 0 },

          { row: 39, col: 1, rowspan: 0, colspan: 5 },
          { row: 40, col: 1, rowspan: 0, colspan: 4 },
          { row: 41, col: 1, rowspan: 0, colspan: 5 },
          { row: 42, col: 0, rowspan: 0, colspan: 6 },
        ]
      }
    }
  },
  methods: {
    getIndex(ary, id, attr) { // 获取开始的 row
      let rowIndex = 0
      ary.forEach(i => {
        if (i[id] == attr) rowIndex = i.row
      })
      return rowIndex
    },
    async exportExcel() { // 当前页导出
      this.exportCurrentLoading = true
      
      this.exportCurrentLoading = false
      
      this.$refs.xTable.$refs.xTable.initStore.export = false // 需手动改为false，否则导出的是上一次选中数据
      this.$refs.xTable.openExport({
        filename: '测试',
        modes: ['current'],
        data: this.gridOptions.data,
      })
    },
  }
}
</script>
<style lang="less">
// .vxe-export--panel{
//   tobody tr{
//     &:nth-child(4) {
//       display: none !important;
//     }
//   }
// }
</style>
